<template>
  <div class="addr-pop-con">
    <!-- 弹窗 -->
    <div class="popup-mask"></div>
    <div class="fix-transform-blur">
      <div class="popup-box">
        <!-- 新增地址 -->
        <div class="tit">
          <div class="text" v-if="this.returnMoneySts != 3">{{$t('applyReturn.fillLogisticsInformation')}}</div>
          <div class="text" v-if="this.returnMoneySts == 3">{{$t('applyReturn.modifyLogisticsInformation')}}</div>
          <div class="close" @click="hidePop"></div>
        </div>
        <div class="con">
          <div class="edit logistics-msg">
            <div class="item">
              <div class="label">{{$t('applyReturn.logisticsCompany')}}：</div>
              <div class="select-box">
                <!-- 物流公司 -->
                <el-select :placeholder="$t('applyReturn.select')" class="area" v-model="dvyName" @change="selectCompany">
                  <el-option
                    v-for="company in deliveryList"
                    :key="company.dvyId"
                    :label="company.dvyName"
                    :value="company"
                  ></el-option>
                </el-select>
                <!-- <div v-if="errTip==1" class="error-text">请选择物流公司</div> -->
              </div>
            </div>
            <div :class="['item', errLnTip? 'error':'']">
              <div class="label">{{$t('applyReturn.shipmentNumber')}}：</div>
              <div class="text-box">
                <input type="text" maxlength="30" v-model="LogisticsNumber" :placeholder="$t('applyReturn.fillLogisticsBillNumber')" class="input" />
                <div v-if="errLnTip" class="error-text">{{$t('applyReturn.logisticsCannotBeEmpty')}}</div>
              </div>
            </div>
            <div :class="['item', errMobileTip? 'error':'']">
              <div class="label">{{$t('applyReturn.mobileNumber')}}：</div>
              <div class="text-box">
                <input
                  type="text"
                  maxlength="11"
                  v-model="mobile"
                  :placeholder="$t('applyReturn.mobileNumberTips')"
                  class="input"
                />
                <div v-if="errMobileTip" class="error-text">{{$t('applyReturn.correctPhoneNumber')}}</div>
              </div>
            </div>
            <div class="item">
              <div class="label">{{$t('applyReturn.notes')}}：</div>
              <div class="text-box">
                <input type="text" max="200" class="input" v-model="remarks" :placeholder="$t('submitOrder.numberLength200')" />
                <!-- <div v-if="errTip==4" class="error-text">请您填写详细地址</div> -->
              </div>
            </div>
            <div class="item">
              <div class="label">{{$t('applyReturn.uploadImages')}}：</div>
              <div>
                <mul-pic-upload class="img-upload" v-model="imgs" :limit="3" :fileList="fileList"/>
                <div class="img-des">（ {{$t('applyReturn.uploadThreeVouchers')}} ）</div>
              </div>
            </div>

            <div class="item">
              <div class="label-btn">&nbsp;</div>
              <a href="javascript:void(0)" class="btn-r" @click="writeLogisticsMsg">{{$t('submit')}}</a>
            </div>
          </div>
        </div>
        <!-- /新增地址 -->
      </div>
    </div>
    <!-- /弹窗 -->
  </div>
</template>


<script>
import util from '../plugins/util'
import MulPicUpload from '~/components/mul-pic-upload'
import config from '../plugins/config'
export default {
  components: {
    MulPicUpload
  },
  props: ['refundSn', 'orderNumber', 'refundDelivery', 'returnMoneySts'],
  data () {
    return {
      deliveryList: [],  //物流公司
      dvyName: '', //快递公司名字
      dvyId: 0, //物流公司id
      LogisticsNumber: '',  //物流单号
      mobile: '',  //手机号码
      remarks: '', //备注
      imgs: '',
      errLnTip: false,
      errMobileTip: false,
      fileList: [], // 已上传的凭证图片列表(用于回显)
    }
  },
  created () {
    this.loadDeliveryData()
    //根据物流单号判断回填信息
    if (this.refundDelivery.deyNu) {
      this.dvyName = this.refundDelivery.deyName
      this.LogisticsNumber = this.refundDelivery.deyNu
      this.mobile = this.refundDelivery.receiverMobile
      this.remarks = this.refundDelivery.senderRemarks
      this.imgs = this.refundDelivery.imgs
      if (this.refundDelivery.imgs) {
        let temp = this.refundDelivery.imgs.split(',')
        temp.forEach(el => {
          this.fileList.push({url: config.picDomain + el})
        });
      }
    }
  },
  methods: {
    /**
     * 加载物流公司
     */
    loadDeliveryData () {
      this.$axios.get('/p/delivery/list')
        .then(({ data }) => {
          this.deliveryList = data
        })
    },
    /**
     * 选择物流公司
     */
    selectCompany (val) {
      this.dvyName = val.dvyName
      this.dvyId = val.dvyId
    },
    /**
     * 提交 || 修改物流信息
     */
    writeLogisticsMsg () {
      var myreg = /^1(3|4|5|6|7|8|9)\d{9}$/;  //手机号验证正则
      if (this.LogisticsNumber.length == 0) {
        this.errLnTip = true
      } else if (this.mobile.length !== 11 || !myreg.test(this.mobile)) {
        this.errMobileTip = true
      } else {
        let orderRefundExpressParam = {
          expressId: this.dvyId,
          expressName: this.dvyName,
          expressNo: this.LogisticsNumber,
          imgs: this.imgs,
          senderRemarks: this.remarks,
          mobile: this.mobile,
          refundSn: this.refundSn,
        }
        console.log(this.orderNumber)
        //当物流单号长度为0时，请求添加物流信息的接口
        if (this.returnMoneySts != 3) {
          this.$axios.post('/p/orderRefund/submitExpress', orderRefundExpressParam)
            .then(({ data }) => {
              this.$message({
                message: this.$t('applyReturn.fillInSuccessfully')+'！',
                duration: 1000,
                type: 'success'
              });
              this.$router.push({ path: '/order-detail?orderNumber=' + this.orderNumber })
            })
        } else if (this.returnMoneySts == 3) {
          //当物流单号不为空时，请求修改物流信息的接口
          this.$axios.put('/p/orderRefund/reSubmitExpress', orderRefundExpressParam)
            .then(({ data }) => {
              this.$message({
                message: this.$t('applyReturn.modifiedSuccessfully')+'！',
                duration: 1000,
                type: 'success'
              });
              this.$router.push({ path: '/order-detail?orderNumber=' + this.orderNumber })
            })
        }
      }
    },

    /**
     * 隐藏新增地址弹窗
     */
    hidePop () {
      this.$emit('toggleAddrPop', false);
    },
  }
}
</script>



<style>
.select-box {
  width: 300px;
  height: 30px;
  line-height: 32px;
  border: 1px solid #eee;
  padding: 5px 10px;
}
.popup-box .con .edit .item .label {
  width: 100px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
}
.area .el-input__inner {
  /* width: 288px; */
  margin: 0;
  padding: 0;
  height: unset;
  line-height: unset;
}
.area .el-scrollbar {
  width: 97px;
}
.area .el-input__suffix-inner {
  position: absolute;
  top: -4px;
  right: -10px;
}
.el-select-dropdown {
  z-index: 20005 !important;
}
.el-select-dropdown__item.selected {
  color: unset;
  font-weight: unset;
}
.el-select .area .el-select > .el-input {
  overflow: hidden;
}
.popup-box .con .edit .item .text-box .input {
  height: 25px;
  line-height: 25px;
  padding: 8px 10px;
}

/* 修复transform导致弹窗内容模糊问题 */
.fix-transform-blur {
  z-index: 10000;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
}

/* 上传图片 */
.con .logistics-msg .img-upload {
  display: block;
  height: 70px;
}
.logistics-msg .el-upload--picture-card {
  width: 70px;
  height: 70px;
}
.logistics-msg .item .el-upload--picture-card {
  line-height: 83px;
}
.logistics-msg .img-des {
  margin-top: 15px;
  color: #aaa;
}
/* 缩略图 */
.logistics-msg .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
}

/* 提交 */
.popup-box .con .logistics-msg .item .label-btn {
  width: 100px;
}
.logistics-msg .item .btn-r {
  width: 291px;
  text-align: center;
  margin-top: 12px;
  height: 2em;
  line-height: 2em;
  font-size: 13px;
  letter-spacing: 2px;
}
</style>